import { Link, useLocation } from "react-router-dom";
import { Drawer } from 'antd';
import classnames from 'classnames';
import { useEffect, useState } from 'react';
import ApplyDialog from './applyDialog';
import { useTranslation } from 'react-i18next';
import i18n from '../i18n'
import Login from './login';
import { useNavigate  } from 'react-router-dom';


const DrawerPopup = ({ show, onEvent }) => {
  const token = localStorage.getItem('token') || ''
  const [showLogin, setShowLogin] = useState(false);
  const { pathname } = useLocation()
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { t } = useTranslation()
  const navigate = useNavigate();

  const tabs = [{
    name: `${t('首页')}`,
    link: '/',
  }, {
    name: `${t('OD列表')}`,
    link: '/list/OD',
    children: ['/detail/OD']
  }, {
    name: `${t('SD列表')}`,
    link: '/list/SD',
    children: ['/detail/SD']
  }, {
    name: `${t('医院列表')}`,
    link: '/list/hospital',
    children: ['/hospitalDetail']
  }, {
    name: `${t('申请加入')}`,
    link: '/application',
  }]
  const close = () => {
    onEvent(false)
  }
  useEffect(() => {
    console.log(pathname);

    close()
    window.scrollTo(0, 0);
  }, [pathname]);

  //申请加入
  const apply = () => {
    // if(!token){
    //   setShowLogin(true)
    //   return
    // }
    setIsModalOpen(true)
  }
  const onCloseLogin = (e) => {
    setShowLogin(e)
  }
  const login = (e)=>{
    console.log(e);
    if(!token&&(e==='/list/OD'||e==='/list/SD')){
      setShowLogin(true)
      return
    }else{
      console.log(e);
      
      navigate(e);
    }
  }

  return (
    <Drawer placement={'left'} onClose={close} open={show} style={{ backgroundColor: '#728D6B' }} width="30%">
      <div className='flex flex-col h-[100%] justify-center sm:text-[20px] text-[12px] text-white'>
        {tabs.map((i, idx) => (
          i.link !== '/application'
            ? <Link onClick={()=>login(i.link)} key={idx} className={classnames('mb-[20px] inline hover:text-orange-400', (pathname === i.link || i?.children?.includes(pathname)) && 'text-orange-400')}> {i.name}</Link>
            : <div onClick={apply} key={idx} className={classnames('mb-[20px] inline hover:text-orange-400', pathname.includes(i.link) && 'text-orange-400')}> {i.name}</div>
        ))}
      </div>
      <ApplyDialog isModalOpen={isModalOpen} onEvent={(e) => setIsModalOpen(e)} />
      <Login show={showLogin} onEvent={onCloseLogin} />

    </Drawer >

  )
}

export default DrawerPopup